<template>
	<!-- #ifdef APP -->
	<scroll-view @scrolltolower="scrolltolowerHandle">
	<!-- #endif -->
		<div class="wordPage">
			<div class="inputBtn" @click="inputBtnClick()">输入</div>
			<div v-if="inputContentShow" class="inputContent">
				<u--textarea 
					v-model="inputValue" 
					autoHeight 
					placeholder="请输入内容" 
					:fixed="true"
				></u--textarea>
			</div>
			
			<!-- 单词内容区 -->
			<div class="word">
				<div class="word__title" @click="changeShowType()">
					收藏
				</div>
				<div class="wordItem" v-for="(item, index) in currentWordData" :key="item.id">
					<div class="wordItem__title" @click="allShowChange(item, 'title')">
						<div class="starBox" @click.stop="starChange(item)">
							<uni-icons :type="item.isStar? 'star-filled':'star'" size="30" color="#f56c9f"></uni-icons>
						</div>
						<span class="wordItem__num">{{ index + 1 }}.</span>
						<template v-if="item.showAll || showType==='all' || showType==='en'">
							<span class="wordItem__word">{{ item.en }}</span>
							<span v-if="item.ph" class="wordItem__ph" @click.stop="playAudio(item.en)">[ {{ item.ph }} ]</span>
						</template>
						<span 
							v-if="item.showAll || showType==='all' || showType==='zh'" 
							class="wordItem__zh"
						>
							{{ item.zh }}
						</span>
					</div>
					<div class="wordItem__eg">
						<div class="egItem" v-for="egItem in item.eg" :key="egItem.en">
							<div @click="allShowChange(egItem, 'eg')">
								<div
									v-if="egItem.showAll || showType==='all' || showType==='en'"
									class="egItemEn"
								>
									- {{ egItem.en }}
								</div>
								<div 
									v-if="egItem.showAll || showType==='all' || showType==='zh'"
									class="egItemZh"
								>
									- {{ egItem.zh }}
								</div>
							</div>
							<u-line margin="12rpx 0"></u-line>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">- 已到达最底部 - </div>
		</div>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	import {
		StarData,
		GetStarWordData
	} from '../../Data/index';

	export default {
		data() {
			return {
				// 当前页面数据
				currentWordData: [],

				// 输入框
				inputContentShow: false,
				inputValue: '',
				
				pageSize: 20,
				pageNum: 1,
			};
		},
		mounted() {
			this.currentWordData = GetStarWordData(); // GetStarWordData(this.pageSize, this.pageNum)
		},
		onShow() {
			console.log('star Show')
			this.currentWordData = GetStarWordData(); //GetStarWordData(this.pageSize, this.pageNum)
			console.log("this.currentWordData:", this.currentWordData)
		},
		computed: {
			...mapState(['showType']),
		},
		methods: {
			...mapMutations([ 'setShowType']),
			/** @description: 改变某条allShow状态 */
			allShowChange(e, type) {
				console.log(e, type)
				if(type === 'title') {
					for(const item of this.currentWordData) {
						if(item.en === e.en) {
							item.showAll = !item.showAll;
							break
						}
					}
				}else if(type === 'eg') {
					let hadFound = false;
					for(const item of this.currentWordData) {
						for(const egItem of (item.eg ?? [])) {
							if(egItem.en === e.en) {
								egItem.showAll = !egItem.showAll;
								break
							}
						}
						
						if(hadFound) break;
					}
				}
			},
			// 改变某条的收藏状态
			starChange(e) {
				console.log(e)
				for(const [index, item] of this.currentWordData.entries()) {
					if(item.en === e.en) {
						console.log("StarData.value:", StarData.value);
						const index = StarData.value.findIndex(starItem => starItem === item.en);
						console.log("index:", index)
						StarData.value.splice(index, 1);
						console.log("StarData.value:", StarData.value);
						
						const index2 = this.currentWordData.findIndex(starItem => starItem.en === item.en)
						console.log("index2:", index2)
						this.currentWordData.splice(index2, 1)
						
						item.isStar = !item.isStar;
						
						break
					}
				}
			},
			/** @description: 打开输入框 */
			inputBtnClick() {
				this.inputValue = '';
				this.inputContentShow = !this.inputContentShow;
			},
			changeShowType() {
				if(this.showType === 'all') this.setShowType('en');
				else if(this.showType === 'en') this.setShowType('zh');
				else this.setShowType('all');
			},
			/** @@description: 滚动到底部 */
			scrolltolowerHandle(){
				// this.pageNum += 1;
				// this.currentWordData = GetStarWordData(this.pageSize, this.pageNum)
			},
			/** @description: 播放语音 */
			playAudio(word) {
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = `https://dict.youdao.com/dictvoice?type=0&audio=${word}`;
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
					console.log(res);
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wordPage {
		.word {
			padding: 24rpx;
			background-color: #fff;
			
			.word__title {
				font-size: 48rpx;
				font-weight: 700;
				text-align: center;
				padding: 24rpx 0;
			}

			.wordItem__title {
				position: relative;
				margin-top: 24rpx;
				line-height: 84rpx;
				padding: 0 24rpx 0 72rpx;
				background-color: azure;
				
				.starBox {
					position: absolute;
					top: -2px;
					left: 4px;
				}
			}

			.wordItem__word {
				margin-left: 12rpx;
				color: #0630a9;
				;
			}

			.wordItem__ph {
				margin-left: 12rpx;
				color: #ff5500;
			}

			.wordItem__zh {
				margin-left: 12rpx;
			}

			.wordItem__eg {
				margin: 24rpx;
				box-shadow: 0 0rpx 20rpx #e6e6e6;
				padding: 12rpx;
			}
		}
		
		.inputBtn {
			position: fixed;
			z-index: 999;
			top: 224rpx;
			right: 24rpx;
			background-color: #55aaff;
			width: 84rpx;
			height: 84rpx;
			line-height: 84rpx;
			border-radius: 42px;
			text-align: center;
			color: #fff;
		}
		
		.inputContent {
			position: fixed;
			z-index: 999;
			bottom: 96rpx;
			left: 5%;
			width: 90%;
			box-shadow: 0 0rpx 20rpx #e6e6e6;
			border: 1px solid #55aaff;
		}

		.footer {
			padding: 48rpx 0;
			text-align: center;
			color: #999;
		}
	}
</style>